<#include "layout/template.ftl"/>

<@htmlHead title="平台订单详情列表">
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${resources}/assets/css/jquery-ui.css" />
		<link rel="stylesheet" href="${resources}/assets/css/datepicker.css" />
		<link rel="stylesheet" href="${resources}/assets/css/ui.jqgrid.css" />
		<link rel="stylesheet" href="${resources}/plugins/jqgrid/4.6/jqgrid.extend.css" />
</@htmlHead>


 
<@htmlBody 'order' 'orderItem'>

	<!-- breadcrumbs begin -->
	<#include "layout/breadcrumbs.ftl">
	<@breadcrumbs '订单管理' '订单详情列表'></@breadcrumbs>
	<!-- breadcrumbs start -->

	<!-- page-content begin -->
	<div class="page-content">
			
			<!-- page-header begin -->
			<div class="page-header">
				<h1>
					<i class="fa fa-trophy"></i>&nbsp;订单详情列表
				<h1>
				
				<div style="margin-top:20px;padding:10px 0px 0px 0px;border-top:1px solid #307ecc">
					<div style="float:right">
						<button id="find_btn"  class="btn btn-sm btn-primary">
							<i class="ace-icon fa fa-search"></i>查 询
						</button>
						<button id="out_btn"  class="btn btn-sm btn-primary">
							<i class="ace-icon fa fa-search"></i>导出
						</button>
				    </div>
				    <div id="query" class="query-view" style="">
						<ul class="list-inline">
							
							<li>	
					        	<label>订单号:</label><input type="text" class="input" id="orderno" name="order.orderno" data-op="cn" /> 
							</li>
							<li>	
					        	<label>订单支付状态:</label>
					        	<select  id="paystatus" name="order.paystatus" data-op="eq"  class="input-sm" style="width:100px;">
					        		<option value="">全部</option>
			        				<option value="0">未支付</option>
				        			<option value="1">已支付</option>
					        	</select>
							</li>
						</ul>
						
						<ul class="list-inline">
							<li>	
					        	<label>开始日期:</label><input type="text" class="input" id="starttime" name="order.createTime" data-op="ge" /> 
							</li>
							<li>	
					        	<label>结束日期:</label><input type="text" class="input" id="endtime" name="order.createTime" data-op="le" /> 
							</li>
							<li>	
					        	<label>商户:</label>
					        	<select  id="merchantid" name="order.merchant.id" data-op="eq"  class="input-sm" style="width:180px;">
					        		<option value="">全部</option>
					        		<#list merchantList as merchantItem>
						        		<option value="${merchantItem.id}">${merchantItem.name}</option>
					        		</#list>
					        	</select>
							</li>
						</ul>
					</div>
				</div>
				
				<p style="color:red;font-size:12px;">导出时，可以通过下单时间,支付状态,商户对数据进行筛选 </p>
			</div>
			<!-- page-header end -->
	
			
			
			<!-- jqGrid begin -->
			<div class="row">	
				<div class="col-md-12">	
				  	<table id="grid-table"></table>
			 		<div id="grid-pager"></div>
				</div>
			</div>	
			<!-- jqGrid end -->
	</div>		
	<!-- page-content end -->	


</@htmlBody>



<@htmlBodyScript>

		
		<!-- 日期控件-->
	 	<script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/bootstrap-datetimepicker.js"></script>
	   	<script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		<script>
			$("#starttime,#endtime").datetimepicker({
				bootcssVer:3,
			    format: "yyyy-mm-dd",
			    language:"zh-CN",
				weekStart: 1,
	        	todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				minView: 2,
				forceParse: 0
			});
		</script>


		<!-- 格式化货币 -->
		<script src="${resources}/plugins/tool/accounting.min.js"></script>
		<script src="${resources}/assets/js/date-time/bootstrap-datepicker.js"></script>
		<script src="${resources}/assets/js/jqGrid/jquery.jqGrid.src.js"></script>
		<script src="${resources}/assets/js/jqGrid/i18n/grid.locale-cn.js"></script>

		<script>
			

			var grid_selector = "#grid-table";
			var pager_selector = "#grid-pager";
		    var $path ='${path}';

			$(function(){
				//----------------------jqgrid查询开始 ---------------------
				//分页插件开始
				$("#grid-table").jqGrid({
					url: '${path}/manage/order/orderItem/list',
					mtype : "post", 
					datatype: "json",
					//prmNames : {search : "search"},  
					colNames:[ 'ID','客户来源','订单编号','订购日期','支付状态','支付时间','订单类型','电话','昵称','收货人','联系电话','收货地址','自提点','产品编号','产品名称','产品单价','产品数量','总金额'],
				 	colModel: [
						{name:'id', width:60},
						{
							name:'id', 
							width:75,
							formatter:function(cellValue, options, rowObject) {
								var output = "淘惠帮";
								return output;
							}
						},
						{name:'orderno',width:100},
						{
							name:'createTime', 
							width:75,
							formatter:function(cellValue, options, rowObject) {
								var output = moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
								return output;
							}
						},
						{
							name:'paystatus', 
							width:60,
							formatter:function(cellValue, options, rowObject) {
								var output = "";
								if(cellValue==1){
									output="已支付";
								}else if(cellValue==0){
									output="未支付";
								}
								return output;
							}
						},
						{
							name:'createTime', 
							width:75,
							formatter:function(cellValue, options, rowObject) {
								var output = moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
								return output;
							}
						},
						{
							name:'goods.merchant.isPicked', 
							width:60,
							formatter:function(cellValue, options, rowObject) {
								var output = "";
								if(cellValue==1){
									output="自提订单";
								}else {
									output="普通订单";
								}
								return output;
							}
						},
						
						{name:'username',width:75},
						{name:'nickname',width:75},
						{name:'receiver',width:75},
						{name:'telephone',width:75},
						{name:'address',width:75},
						{name:'id',width:75,
							formatter:function(cellValue, options, rowObject){
								$.ajax({
					                url:'${path}/manage/order/orderItem/getOrder',
					                data:{
					                	id:cellValue
					                },
					                async: false,
					                error: function(request) {
					                    alert("Connection error");
					                },
					                success: function(data) {
					                    var order = data.result;
					                    if(order.merchant.isPicked==1){
					                        if(order.picked!=null){
					                   		   options = order.picked.address;
					                   		 }
					                    }else{
					                    	options = "";
					                    }
					                }
					            });
					            return options;
							}
						},
						{name:'goods.id',width:50},
						{name:'goods.name',width:75},
						{name:'price',width:50},
						{name:'amount',width:50},
						{
							name:'id', 
							width:60,
							formatter:function(cellValue, options, rowObject) {
								var amount = rowObject.amount;
								var price = rowObject.price;
								return amount*price;
							}
						},
					],
					viewrecords: true, 							// 在toolbar显示的当前页数,步长,总数
					autowidth: true,								//自动宽度
					height: "450",
					rowNum: 20,
					rowList:[20,50,100],
					sortname: 'id',
					sortorder: 'desc',
					pager: "#grid-pager",
					caption: "列表",
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					}
					
				});
				//分页插件结束
				
				//------------------------------- 自定义查询开始 -------------------------------
				//自定义查询开始
				$("#find_btn").click(function(){ 
					searchData('${path}/manage/order/orderItem/list');
			    }); 
				//自定义查询结束
				
			})
		</script>	
	    <script src="${resources}/assets/js/jqGrid/jquery.jqGrid.Extract.js"></script>
	    
	    <script type="text/javascript">
		//导出数据
		$("#out_btn").click(function(){ 
			var paystatus=$("#paystatus").find("option:selected").val();
			var merchantid=$("#merchantid").find("option:selected").val();
			if(paystatus!=1){	//1表示已确认
				alert("支付状态必须为已支付");
				return;
			}
			var startTime=$("#starttime").val();
			var endTime=$("#endtime").val();
			if(startTime=='' || endTime==''){
				alert("时间必须选择一个区间");
				return;
			}
			var url='${path}/manage/order/orderItem/export';
			url=url+'?merchantid='+merchantid+'&paystatus='+paystatus+'&startTime='+startTime+'&endTime='+endTime
			window.location.href=url;
	    });
        </script>

</@htmlBodyScript>